<!-- 标准搜索框 -->
<!--
<StandardSearch
    v-model="inputValue"
    :placeholder="placeholder"
    :clearable="flag2"
    @on-search="search">
</StandardSearch>

@attr value: { String } 搜索关键字，可使用v-model进行双向绑定
@attr placeholder: { String } 搜索框占位文本
@attr clearable: { Boolean } [default: true] 是否显示清空按键
@event on-search: { Expression } 搜索动作，点击搜索图标或按下回车键时触发，返回搜索关键词
-->
<template>
    <div class="standard-search">
        <input
                class="standard-search-input input-default"
                type="text"
                :value="modelValue"
                :placeholder="placeholder"
                @input="handleInput"
                @keyup.enter="search"
        />
        <div class="absolute-right">
            <i
                    class="standard-search-clear iconfont icontuoyuan"
                    @click="clear"
                    v-if="modelValue.trim().length !== 0"
            ></i>
            <button class="standard-search-btn iconfont iconxingzhuang1" v-else></button>
        </div>
    </div>
</template>
<script>
    export default {
        name: "",
        props: {
            value: {
                type: [String, Number],
                default: ""
            },
            placeholder: {
                type: String,
                default: ""
            },
            clearable: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                modelValue: this.value,
                timer: undefined
            };
        },
        watch: {
            value(present) {
                this.modelValue = present;
            }
        },
        methods: {
            handleInput(event) {
                this.modelValue = event.target.value;
                this.$emit("input", event.target.value);

                // 防抖
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    this.search();
                }, 400);
            },
            clear() {
                this.modelValue = "";
                this.$emit("input", "");
                this.search();
            },
            search() {
                this.$emit("on-search", this.modelValue);
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "../styles/_mixin";

    .standard-search {
        position: relative;
        display: inline-block;
        width: 290px;
        height: 35px;
        border: solid 1px $border-color;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 1px;
        color: $font-color;
        border-radius: 2px;

        .standard-search-input {
            width: 100%;
            height: 100%;
            border: none;
            padding-left: 10px;
            padding-right: 35px * 2;
            line-height: 35px - 1px - 1px;

            &:hover + .standard-search-clear,
            &:focus + .standard-search-clear {
                transform: scale(1);
            }
        }

        .iconfont {
            display: inline-block;
            vertical-align: top;
            height: 100%;
            text-align: center;
            cursor: pointer;
            line-height: 35px - 1px - 1px;
        }

        .standard-search-clear {
            width: 35px;
            font-size: 13px;
            color: #bbb;
            opacity: 0.85;

            &:hover {
                opacity: 1;
            }
        }

        .standard-search-btn {
            border: none;
            font-size: 14px;
            width: 35px - 1px - 1px;
            // font-weight: bold;
            color: #b9bed1;
            background-color: transparent;
        }
    }
</style>
